<!--分区域-->
<template>
  <div class="budgetDelivery-tab1">
    <div class="operation">
      <el-form :inline="true" :model="form" label-width="80px" class="formList">
        <el-form-item label="选择区域">
          <dx-cascader  :area_id.sync="form.areaId" />
        </el-form-item>
        <el-form-item label="年度">
          <el-date-picker v-model="form.year" value-format="yyyy" type="year" placeholder="选择年"></el-date-picker>
        </el-form-item>
        <el-form-item label="跟踪月份">
          <el-select v-model="form.trackingMonth" placeholder="请选择" @change="selectTrigger">
            <el-option  value="全年">全年</el-option>
            <el-option  value="上半年">上半年</el-option>
            <el-option  value="下半年">下半年</el-option>
            <el-option  value="自定义">自定义</el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width: 27%;">
          <el-button size="small" type="primary" @click="submitHandle()">查询</el-button>
          <el-button size="small" type="orange" @click="allExportModal()">批量导出</el-button>
          <el-button size="small" type="orange" @click="exportModal()" >导出</el-button>
        </el-form-item>
        <el-form-item class="annual">
          <template>
            <el-checkbox-group v-model="checkList"  @change="checkedMonth">
              <el-checkbox v-for="(item,index) in form.checkedContent" :label="item.index" :key="index" >{{item.value}}</el-checkbox>
            </el-checkbox-group>
          </template>
        </el-form-item>
        <el-form-item class="annual">
          <template>
            <div class="title">筛选条件：</div>
            <div class="border">
              <div><span class="paddRig">跟踪指标：</span>
                <el-checkbox-group v-model="trackingArr"  @change="trackingClick">
                  <el-checkbox v-for="(item,index) in trackType"  :label="item" :key="index" >{{item.indexName}}</el-checkbox>
                </el-checkbox-group>
              </div>
              <div><span class="paddRig">跟踪维度：</span>
                <el-radio-group v-model="form.radio" @change='checedRadio'>
                  <el-radio :label="1">全部明细</el-radio>
                  <el-radio :label="2">只看进度</el-radio>
                </el-radio-group>
              </div>
            </div>
          </template>
        </el-form-item>

      </el-form>
    </div>
     <p class="g-unit">单位: 万元</p>
    <div v-show="form.radio==1">
      <div class="tableBox" v-for="(item,index) in tableAllData" :key="item.proType" v-if="tableDataObj['tableData'+index].length>0">
        <el-table
          v-loading="tableLoading"
          :data="tableDataObj['tableData'+index]"
          height="85vh"
          style="width: 100%"
          class="tableTh28"
          border
          stripe
          :ref="'tableData'+index"
        >
          <el-table-column :label="item.proType" prop="areaName" class-name="first-title" width="100" fixed></el-table-column>
          <el-table-column
            label="月度预算"
            class-name="third-title"
            width="120"
          >
            <el-table-column v-for="(item,index) in colDefList" :key="index" :label="item">
              <el-table-column width="100" label="目标值" :prop="'targetValue'+(index)"></el-table-column>
              <el-table-column width="100" label="实际完成" :prop="'actValue'+(index)"></el-table-column>
              <el-table-column label="完成进度(%)" :prop="'process'+(index)"></el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 只看进度 -->
    <div v-show="form.radio==2">
      <div class="tableBox" v-for="(item1,index1) in tableAllData1" :key="item1.proType" v-if="tableDataObj1['tableData'+index1].length>0 && (trackingArr&&JSON.stringify(trackingArr).indexOf(item1.proType)>-1)">
        <el-table v-loading="tableLoading" :data="tableDataObj1['tableData'+index1]" style="width: 100%" class="tableTh28" border stripe :ref="'tableData'+index1">
          <el-table-column :label="item1.proType" prop="areaName" class-name="first-title" width="100" fixed></el-table-column>
          <el-table-column
            label="月度预算"
            prop="indexName"
            class-name="third-title"
            width="120"
          >
            <el-table-column v-for="(item,index) in colDefList1" :key="index" :label="item" :prop="'process'+(index)"> </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import { $budgetAPI } from "@/api";
  import prefixAPI from "@/api/prefixAPI"
  import { getSessionStorage } from "@/common/js/storage";
  import {getCookie} from "@/common/js/cookie"
  let accountInfo = JSON.parse(getSessionStorage('accountInfo'))
  export default {
    name: "budgetDelivery-tab1",
    props:{
      areaList:{
        type:Array,
        default:()=>([])
      }
    },
    data() {
      return {
        form: {
          areaId: accountInfo.areaId,
          year: '',
          trackingMonth:'全年',
          dimension:1,
          radio:1,
          checkedContent:[
            {index:'01',value:'1月'},
            {index:'02',value:'2月'},
            {index:'03',value:'3月'},
            {index:'04',value:'4月'},
            {index:'05',value:'5月'},
            {index:'06',value:'6月'},
            {index:'07',value:'7月'},
            {index:'08',value:'8月'},
            {index:'09',value:'9月'},
            {index:'10',value:'10月'},
            {index:'11',value:'11月'},
            {index:'12',value:'12月'}
          ],

        },
        accountInfo: "",
        checkList: [],
        indexType:1,
        trackType:[],
        trackingList:[],
        trackingArr:[],
        checked:[],
        indexTypeStr:[],
        trackMonthStr:[],
        colDefList:[],
        colDefList1:[],
        tableData:[],
        tableData1:[],
        tableData2:[],
        tableData3:[],
        tableData4:[],
        tableData5:[],
        tableData6:[],
        tableData7:[],
        tableData8:[],
        tableData9:[],
        tableData10:[],
        tableData11:[],
        tableLoading: false,
        tableAllData:[],
        tableDataObj: {},
        tableAllData1:[],
        tableDataObj1: {},

      };
    },
    created() {
      this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    },
    mounted(){
      this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
      this.getParams();
    },
    methods: {
      async getParams(){
        this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
        this.checkList = ['01','02','03','04','05','06','07','08','09','10','11','12']
        this.form.year = await this.getMaxMonthByTrackType();
        this.trackMonthStr=[]
        for(let item of this.checkList){
          this.trackMonthStr.push(this.form.year+item)
        }
        let trackType = await this.getTrackType();
        this.trackingArr = trackType
        this.submitHandle();
      },
      //获取时间数组对象
      checkedMonth(val){
        this.checkList = val;
        this.trackMonthStr=[]
        for(let item of this.checkList){
          this.trackMonthStr.push(this.form.year+item)
        }
        this.tableData=[];
        // this.submitHandle();
      },
      //获取指标数组对象
      trackingClick(val){
        // alert("1")
        // this.submitHandle();
      },
      // 下拉框事件
      selectTrigger(val){
        this.form.trackingMonth = val
        if(this.form.trackingMonth == '全年'){
          this.checkList = ['01','02','03','04','05','06','07','08','09','10','11','12']
          this.trackMonthStr=[]
          for(let item of this.checkList){
            this.trackMonthStr.push(this.form.year+item)
          }
          this.submitHandle();
        }if(this.form.trackingMonth == '上半年'){
          this.checkList = ['01','02','03','04','05','06']
          this.trackMonthStr=[]
          for(let item of this.checkList){
            this.trackMonthStr.push(this.form.year+item)
          }
          this.submitHandle();
        }if(this.form.trackingMonth == '下半年'){
          this.checkList = ['07','08','09','10','11','12']
          this.trackMonthStr=[]
          for(let item of this.checkList){
            this.trackMonthStr.push(this.form.year+item)
          }
          this.submitHandle();
        }if(this.form.trackingMonth == '自定义'){
          this.checkList = []
          this.trackMonthStr=[]
          for(let item of this.checkList){
            this.trackMonthStr.push(this.form.year+item)
          }
          this.submitHandle();
        }
      },
      //获取跟踪指标
      getTrackType(){
        var that = this
        return new Promise(resolve => {
          $budgetAPI.getTrackTypeAuto(
            {indexType:this.indexType},
            res => {
              if (res && res.code == 0) {
                that.trackType = res.content;
                // that.indexTypeStr = res.content;
                resolve (res.content)
              }
            },
            err => {}
          )
        });
      },
      //获取年份
      getMaxMonthByTrackType(){
        var that = this
        return new Promise(resolve => {
          $budgetAPI.getMaxMonthByTrackTypeAuto(
            {
              indexType:this.indexType,
              areaId : this.form.areaId ? this.form.areaId:this.accountInfo.areaId,
            },
            res => {
              if (res && res.code == 0) {
                that.form.year = res.content;
                resolve (res.content)
              }
            },
            err => {}
          );
        });
      },
      //获取跟踪维度
      checedRadio(val){
        this.form.radio = val
        this.submitHandle()
      },
      //点击查询
      async  submitHandle() {
        this.trackMonthStr=[]
        for(let item of this.checkList){
          this.trackMonthStr.push(this.form.year+item)
        }
        this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
        let params ={
          areaId : this.form.areaId ? this.form.areaId:this.accountInfo.areaId,
          testYear : this.form.year,
          indexTypeStr :JSON.stringify(this.trackingArr),
          trackMonthStr:JSON.stringify(this.trackMonthStr),
          indexType:1
        }
        this.getData(params);
      },
      getData(params) {

        if(this.form.radio == 1){
          this.tableLoading = true;
          var that=this
          $budgetAPI.getReleaseTrackDataAuto(params,res => {
            if (res.code === 0) {
              that.tableLoading = false
              that.colDefList = res.content.acctMonths
              that.tableAllData=res.content.data
              res.content.data.forEach((item,index)=>{
                that.$set(that.tableDataObj,'tableData'+index,item.dataList)
                that.tableDataObj['tableData'+index].map((item,index)=>{
                  item.dataList.map((ele, ind) => {
                    item['targetValue' + ind] = ele.targetValue
                    item['actValue' + ind] = ele.actValue
                    item['process' + ind] = ele.process
                  })
                })
              })
            } else {
              this.alertError(res);
            }
            setTimeout(()=>{
              for (let prop in that.tableDataObj) {
                that.$refs[prop] && that.$refs[prop][0] && that.$refs[prop][0].doLayout()
              }
            },500);
          });
        }else{
          this.tableLoading = true;
          var that=this
          $budgetAPI.getReleaseTrackDataAuto(params,res => {
            if (res.code === 0) {
              that.tableLoading = false
              that.colDefList1= res.content.acctMonths
              that.tableAllData1=res.content.data
              res.content.data.forEach((item,index)=>{
                that.$set(that.tableDataObj1,'tableData'+index,item.dataList)
                that.tableDataObj1['tableData'+index].map((item,index)=>{
                  item.dataList.map((ele, ind) => {
                    item['targetValue' + ind] = ele.targetValue
                    item['actValue' + ind] = ele.actValue
                    item['process' + ind] = ele.process
                  })
                })
              })
            } else {
              this.alertError(res);
            }
            setTimeout(()=>{
              for (let prop in that.tableDataObj1) {
                that.$refs[prop] && that.$refs[prop][0] && that.$refs[prop][0].doLayout()
              }
            },500);
          });
        }
      },
      //导出
      exportModal() {
        let areaId = this.form.areaId;
        let testYear = this.form.year;
        let indexTypeStr1=[];
        this.trackingArr.map((item,index) =>{
          indexTypeStr1[index] = item.indexCode
        })
        // let indexTypeStr= JSON.stringify(indexTypeStr1)
        // let trackMonthStr =JSON.stringify(this.trackMonthStr);

        let indexTypeStr = indexTypeStr1.toString().replace(/\"/gi, "'");
        let trackMonthStr = this.trackMonthStr.toString().replace(/\"/gi, "'");
        let indexType = 1;
        let token = getCookie('token');
        if(this.form.radio == 1){
          let isShowDetail=true;
          // 根据不同模式切换不同的路径
          if (process.env.NODE_ENV == "development") {
            window.location.href =
              prefixAPI.loc +
              `/api/releaseTrackAuto/exportReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&trackMonthStr=${trackMonthStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
          } else if (process.env.NODE_ENV == "production") {
            window.location.href =
              prefixAPI.hp +
              `/api/releaseTrackAuto/exportReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&trackMonthStr=${trackMonthStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
          }
        }else{
          let isShowDetail=false;
          // 根据不同模式切换不同的路径
          if (process.env.NODE_ENV == "development") {
            window.location.href =
              prefixAPI.loc +
              `/api/releaseTrackAuto/exportReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&trackMonthStr=${trackMonthStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
          } else if (process.env.NODE_ENV == "production") {
            window.location.href =
              prefixAPI.hp +
              `/api/releaseTrackAuto/exportReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&trackMonthStr=${trackMonthStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
          }
        }
      },
      //批量导出
      allExportModal() {
        let areaId = this.form.areaId;
        let testYear = this.form.year;
        let indexTypeStr1=[];
        this.trackingArr.map((item,index) =>{
          indexTypeStr1[index] = item.indexCode
        })
        // let indexTypeStr= JSON.stringify(indexTypeStr1)
        // let trackMonthStr =JSON.stringify(this.trackMonthStr);
        let indexTypeStr = indexTypeStr1.toString().replace(/\"/gi, "'");
        let trackMonthStr = this.trackMonthStr.toString().replace(/\"/gi, "'");
        let indexType = 1;
        let token = getCookie('token');
        if(this.form.radio == 1){
          let isShowDetail=true;
          // 根据不同模式切换不同的路径
          if (process.env.NODE_ENV == "development") {
            window.location.href =
              prefixAPI.loc +
              `/api/releaseTrackAuto/exportBatchReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&trackMonthStr=${trackMonthStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
          } else if (process.env.NODE_ENV == "production") {
            window.location.href =
              prefixAPI.hp +
              `/api/releaseTrackAuto/exportBatchReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&trackMonthStr=${trackMonthStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
          }
        }else{
          let isShowDetail=false;
          // 根据不同模式切换不同的路径
          if (process.env.NODE_ENV == "development") {
            window.location.href =
              prefixAPI.loc +
              `/api/releaseTrackAuto/exportBatchReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&trackMonthStr=${trackMonthStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
          } else if (process.env.NODE_ENV == "production") {
            window.location.href =
              prefixAPI.hp +
              `/api/releaseTrackAuto/exportBatchReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&trackMonthStr=${trackMonthStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
          }
        }
      },
    }
  };
</script>
<style lang="scss" scoped>
</style>
<style lang="scss">
  .budgetDelivery-tab1 {
    .local {
      .cell {
        color: #000000;
        font-weight: 700;
      }
    }

    .operation {
      .annual {
        width: 100%;
        padding-left: 20px;
        .el-form-item__content{
          width: 100%;
        }
        .title{font-size: 18px;}
        .paddRig{
          padding-right: 25px;
        }
        .border{
          border: 1px solid #DCDFE6;
          padding: 0 20px;
          margin-bottom: 10px;
          .el-checkbox-group{
            display: inline-block;
          }
        }
      }
      .btnForm{
        float: right;
        .el-form-item__content{
          float: right;
          width: 100%;
          .export{
            float:right;
          }
        }
      }
    }
  }
</style>
